<script setup>
import { ref, computed, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const active = ref(0)

const tabItems = [
  {
    name: '首页',
    path: '/'
  },
  {
    name: '视频',
    path: '/video'
  },
  {
    name: '+发笔记',
    path: '/post',
    isSpecial: true
  },
  {
    name: '消息',
    path: '/message'
  },
  {
    name: '我的',
    path: '/mine'
  }
]

const showTabbar = computed(() => {
  const showTabbarRoutes = ['/', '/video', '/message', '/mine']
  return showTabbarRoutes.includes(route.path)
})

const isVideoRoute = computed(() => {
  return route.path === '/video'
})

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    if (newPath === '/video') {
      active.value = -1  // 设置为-1，使所有按钮都显示未选中状态
    } else {
      // 根据当前路径设置对应的激活索引
      const index = tabItems.findIndex(item => item.path === newPath)
      active.value = index >= 0 ? index : 0
    }
  },
  { immediate: true }
)

const onChange = (index) => {
  router.push(tabItems[index].path)
}
</script>

<template>
  <RouterView />
  <div class="foot-bar" v-if="showTabbar" :class="{ 'video-theme': isVideoRoute }">
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item 
        v-for="(item, index) in tabItems" 
        :key="index" 
        :class="{ 'special-tab': item.isSpecial }"
      >
        {{ item.name }}
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.video-theme :deep(.van-tabbar) {
  background-color: rgba(0, 0, 0, 0.8);
}

.video-theme :deep(.van-tabbar-item) {
  color: rgba(255, 255, 255, 0.7);
}

.video-theme :deep(.van-tabbar-item--active) {
  color: #fff;
}

.foot-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.van-tabbar-item {
  font-size: 16px;
  font-weight: 500;
  color: #8B8B8B;
}
:deep(.van-tabbar-item--active) {
  color: #FF653F;
}
:deep(.special-tab) {
  background-color: #FF653F;
  color: white !important;
  border-radius: 20px;
  margin: 5px 15px;
  padding: 0 15px;
}
:deep(.special-tab.van-tabbar-item--active) {
  color: white !important;
}
:deep(.special-tab .van-icon) {
  color: white !important;
}
</style>
